@gray: #333;
@color: #4482ff;
@color2: #49b0ff;
@color3: #7680ff;

@baseWidth: 720;
.px2rem(@atr,@px,@base-width:0) when( @base-width > 0){
	@{atr}: unit(@px*10/@base-width , rem);
}

.px2rem(@atr,@px,@base-width:0) when( @base-width = 0){
	@{atr}: unit(@px*10/@baseWidth , rem);
}

.Basic{
    display: flex;
    flex-wrap: wrap;
    .items{
        position: relative;
        color: #fff;
        text-align: center;
        .px2rem(padding-top, 22);
        .px2rem(padding-bottom, 22);
        margin: 2%;
        background: -webkit-linear-gradient(top, #4482ff, #2ca3ff 50%, #13c3ff);
        &:nth-child(3n-1){
            background: -webkit-linear-gradient(top, #2dc0d3, #42cfc3 50%, #57ddb2);
        }
        &:nth-child(3n){
            background: -webkit-linear-gradient(top, #7e60ff, #956aff 50%, #ac73ff);
        }
        &.col-8{
            width: 29%;
        }
        .icon{
            position: absolute;
            z-index: 0;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
            .px2rem(font-size, 62);
            opacity: .15;
        }

        .num{
            font-weight: normal;
            .px2rem(font-size, 26);
            .px2rem(line-height, 32);
            .px2rem(margin-bottom, 8);
        }
        .text{
            .px2rem(font-size, 16);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: block;
        }
    }
}